CSS || 元素垂直居中笔记

CSS种元素垂直居中

根据不同情况，使用的垂直居中方式各异：针对块级元素与行级元素的垂直居中不同。

1 行级元素

1.1 行内包含特殊元素

• 如果行内包含特殊元素：图片、input输入框、inline-block元素或者粗体

• 使用verticle-align: middle;设置对齐方式即可垂直居中。text-bottom/text-top 为下对齐/上对齐

• 兼容性很好：IE4

1.2 设置line-height

• 设置line-height与height值相等，可以实现行级元素或者纯文本的块级元素的垂直居中

• 兼容性好IE4

2 块级元素

2.1 flex和align-items

• 设置容器元素display: flex; align-items: center;即可，其内的子元素在容器中垂直居中

• 缺点： 使用flex布局，并且使用CSS3的align-items属性，兼容性较差：IE11

2.2 flex和align-self

• 设置容器元素display: flex; ，子元素设置align-self: center;

• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

• 同样兼容性较差：IE11

2.3 绝对定位

• 父元素设置相对定位position: relative;

• 子元素设置绝对定位postion: absolute; top: 0; left:0; bottom: 0; right: 0; margin: auto;

• 关键在于设置top: 0; left:0; bottom: 0; right: 0; margin: auto表示水平、垂直4个方向的margin值都通过计算获取

• 兼容性IE7

  <div class="wrap">
  <div class="child"></div>
  </div>
  
  <style type="text/css">
  * {margin: 0; padding: 0;}
  .wrap {position: relative; 100vw; height: 100vh;}  /* 注意清除margin和padding，否则100vh不对*/
  .child {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 200px;
    height: 100px;
    background: lightgreen;
  }

2.4 display: table-cell

• 表格元素可以设置verticle-align: middle;实现垂直居中

• 为容器添加display: table-cell; verticle-align: middle;

• 缺点是不能设置百分比宽度，可以设置固定像素值

• 兼容向IE8

2.5 绝对定位

• 利用父元素相对定位，子元素绝对定位，并且处置、水平方向个偏移50%

• 子元素利用负值margin偏移自身宽度、长度的一半

• 缺点是需要固定子元素的宽高

• 兼容性IE7

2.6 绝对定位使用translate()属性

• position: absolute; top: 50%; left: 50%;中，50%是相对容器的宽度

• transform: translate(-50%, 50%)是相对于元素自身的宽度，无需再用负的margin值

  父元素设置{ position: relative; }
  子元素设置{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%) }